import "./App.css";
import { Modal, Resizable } from "@douyinfe/semi-ui";
import TreeComp from "./tree";
import Editor from "./components/editorWang";
import { useEffect, useState } from "react";
import { useSettingStore } from "./store";
import Welcome from "./components/welcome";
import Search from "./components/search";

function App() {
  const { currentPath } = useSettingStore();
  const [path, setPath] = useState(currentPath);
  const [searchModalVisible, setSearchModalVisible] = useState(false);
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (
        (event.ctrlKey || event.metaKey) &&
        event.altKey &&
        event.key === "f"
      ) {
        event.preventDefault();
        setSearchModalVisible(true);
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

  return (
    <>
      <div className="h-screen flex">
        <Resizable
          className="resizable-container"
          defaultSize={{
            width: "14%",
            height: "100%",
          }}
          enable={{
            top: false,
            left: false,
            bottom: false,
            topLeft: false,
            topRight: false,
            bottomLeft: false,
            bottomRight: false,
          }}
        >
          <TreeComp
            onSelected={(key) => setPath(key)}
            selectedKey={currentPath}
          ></TreeComp>
        </Resizable>
        <div className="flex-1 h-full">
          {path ? <Editor path={path ?? ""} /> : <Welcome></Welcome>}
        </div>
      </div>

      <Modal
        onOk={() => {}}
        onCancel={() => setSearchModalVisible(false)}
        closeOnEsc={true}
        visible={searchModalVisible}
        footer={null}
        width={"50%"}
      >
        <Search
          onConfirm={(key) => {
            setPath(key);
            setSearchModalVisible(false);
          }}
        ></Search>
      </Modal>
    </>
  );
}

export default App;
